<template>
  <view class="app-warp">
    <md-nav-bar :title="title" :left-icon="leftIcon" :backUrl="backUrl" :showLeft="showLeft" />
    <slot name="head"></slot>
    <scroll-view
      scroll-y="true"
      :refresher-enabled="!!isRefresh"
      :refresher-triggered="data.triggered"
      @refresherrefresh="onRefresh"
      @refresherrestore="onRestore"
      @refresherabort="onAbort"
      class="app-container">
      <slot />
    </scroll-view>
    <!-- 底部按钮悬浮固定在底部 -->
    <slot class="footer-box" name="footer">
      <view class="footer-container shadow flex-l" v-if="isBtn">
        <block v-for="(item, i) in btnTextItems" :key="i">
          <md-button
            v-if="!item?.hide"
            class="button"
            @click="() => btnClick({ index: i, item })"
            :loading="!!item?.loading"
            :title="item.text"
            :text-color="item.textColor"
            :color="item.color"
            :openType="!!item.openType ? item.openType : buttonType?.openType" />
        </block>
      </view>
    </slot>
    <!-- 用于弹窗，防止弹窗级别过低 -->
    <slot name="dialog" />
  </view>
</template>
<script setup lang="ts">
import { defineEmits, reactive } from 'vue';

export type BtnTextItem = {
  text: string;
  color?: string;
  textColor?: string;
  key?: string;
  loading?: boolean;
  hide?: boolean;
  openType?: string;
};

interface PropsType {
  // 导航栏属性
  title?: string;
  leftIcon?: string;
  showLeft?: boolean;
  // 底部按钮属性
  isBtn?: boolean;
  loading?: boolean;
  btnTextItems?: BtnTextItem[];
  buttonType?: Record<string, any>;
  // 返回按钮跳转至指定地址
  backUrl?: string;
  /**
   *  是否开启页面的下拉刷新
   *  如果开启，配合事件【pullDownRefresh】使用
   */
  isRefresh?: boolean;
}

type InfoType = { index: number; item: BtnTextItem };
// 接收props
withDefaults(defineProps<PropsType>(), {
  // 导航栏属性
  title: '',
  leftIcon: 'left',
  showLeft: true,
  // 底部按钮属性
  isBtn: false,
  loading: false,
  btnTextItems: [{ text: '按钮', key: 'button' }],
  backUrl: '',
  isRefresh: false,
});

const data = reactive({
  triggered: false,
});

const emit = defineEmits<{
  (e: 'btnClick', info: InfoType): void;
  (e: 'pullDownRefresh', event: any): void;
}>();

function onRefresh(e: any) {
  data.triggered = true;
  emit('pullDownRefresh', e);
  setTimeout(() => {
    data.triggered = false; // 重置
  }, 1000);
}

function onRestore() {
  data.triggered = false; // 需要重置
}

// 中断下拉
function onAbort() {
  console.log('onAbort');
}

// 按钮点击事件
const btnClick = (info: InfoType) => {
  emit('btnClick', info);
};
</script>
<style lang="scss" scoped>
.app-warp {
  height: 100vh;
  display: flex;
  flex-direction: column;
  background-color: #f8f8f8;
  .app-container {
    flex: 1;
    overflow: hidden scroll;
    display: flex;
    flex-direction: column;
  }
}
.footer-box {
  padding-bottom: constant(safe-area-inset-bottom);
  padding-bottom: env(safe-area-inset-bottom);
}
.footer-container {
  background: $white;
  padding: 16rpx 30rpx $safe-bottom;
  box-sizing: border-box;
  .button {
    flex: 1;
    &:not(:last-of-type) {
      margin-right: 20rpx;
    }
  }
}
</style>
